<template>
  <div class="app-main__banner">
    <div class="swiper-contenier">
      <swiper
        :modules="modules"
        :pagination="{ clickable: true }"
      >
        <swiper-slide v-for="item in bannerList" :key="item.bannerid">
          <img :src="item.img">
        </swiper-slide>
  </swiper>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

import {getBannerListApi} from '@/api/banner'
import {onMounted,ref,reactive} from 'vue'
import type {IBannerItem} from '@/@types/banner'
const bannerList=ref<IBannerItem[]>([])
const modules =[Pagination]
const getBannerList=async()=>{
  const data=await getBannerListApi()
  // console.log(data)
  bannerList.value=(data as unknown) as IBannerItem[]
}
onMounted(()=>{
  getBannerList()
})
</script>
<style lang="scss">
.app-main__banner{
  height: 2.8rem;
  position: relative;
  overflow: hidden;
  &:after{
    content: '';
    display: block;
    width:20rem;
    height: 20rem;
    background-color: #b83627;
    border-radius: 50%;
    position: absolute;
    top: -18rem;
    left: -6.5rem;
    z-index: -1;
  }
  .swiper-contenier{
    width: 7rem;
    height: 3rem;
    background-color: skyblue;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    img{
      width: 100%;
    }
  }
}
</style>